<!-- 首页简化导航栏 - 只有搜索框 -->
<template>
  <view class="home-navbar" :style="navbarStyle">
    <su-status-bar />
    <view class="navbar-content">
      <view class="search-container">
        <view class="search-box" @tap="onSearchClick">
          <text class="search-placeholder">{{ searchPlaceholder }}</text>
          <view class="search-icon">
            <view class="search-icon-svg"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    searchPlaceholder: {
      type: String,
      default: '搜索感兴趣的车型'
    }
  });

  const emits = defineEmits(['search']);

  const navbarStyle = computed(() => ({
    backgroundColor: 'transparent',
    paddingTop: sheep.$platform.device.statusBarHeight + 'px'
  }));

  const onSearchClick = () => {
    emits('search');
    sheep.$router.go('/pages/index/search');
  };
</script>

<style lang="scss" scoped>
.home-navbar {
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;

  .navbar-content {
    padding: 0 40rpx;
    display: flex;
    justify-content: center;

    .search-container {
      width: 100%;
      max-width: 680rpx;

      .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 40rpx;
        padding: 10rpx 20rpx 10rpx 30rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        border: 1rpx solid rgba(255, 255, 255, 0.3);
        height: 48rpx;

        .search-placeholder {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.9);
          flex: 1;
          text-align: left;
          text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
        }

        .search-icon {
          width: 32rpx;
          height: 32rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .search-icon-svg {
            width: 20rpx;
            height: 20rpx;
            position: relative;
            
            &::before {
              content: '';
              position: absolute;
              width: 14rpx;
              height: 14rpx;
              border: 2rpx solid rgba(255, 255, 255, 0.9);
              border-radius: 50%;
              top: 0;
              left: 0;
              filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.3));
            }
            
            &::after {
              content: '';
              position: absolute;
              width: 6rpx;
              height: 2rpx;
              background: rgba(255, 255, 255, 0.9);
              border-radius: 1rpx;
              top: 14rpx;
              left: 14rpx;
              transform: rotate(45deg);
              filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.3));
            }
          }
        }

        &:active {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(0.98);
          
          .search-icon {
            transform: scale(0.95);
          }
        }
      }
    }
  }
}
</style>
